<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=0.9">
    <title>顾客列表</title>
    <link rel="stylesheet" href="static/bootstrap-3.4.1/css/bootstrap.css">
    <link rel="stylesheet" href="static/bootstrap-3.4.1/css/bootoast.css">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        .my-container {
            height: 100%;
        }

        .table .text {
            /* padding-top: 10px !important; */
        }

        .table th, .table td {
            text-align: center;
        }

        .table td {
            display: table-cell !important;
            vertical-align: middle !important;
        }

        .footer {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 10px;
            color: #666;
            text-align: center;
        }
    </style>
    <!-- 引入jquery.js-->
    <script src="./static/bootstrap-3.4.1/js/jquery-3.6.0.min.js"></script>
    <!-- 引入bootstrap.js-->
    <script src="./static/bootstrap-3.4.1/js/bootstrap.js"></script>
    <script src="./static/bootstrap-3.4.1/js/bootoast.js"></script>
    <script src="./static/js/types.js"></script>
    <script>
        $(function (){
            loadCustomer();
        })
        function loadCustomer(){
            $.getJSON("/customer/selectAll",function (data){
                $("tbody").empty();
                console.log(data);
                let i = 1;
                for (let customer of data) {
                    let rowItem = `<tr>
                    <td>${i}</td>
                    <td>${customer.cName}</td>
                    <td>${customer.cNum}</td>
                    <td>${customer.cPhone}</td>
                    <td>${customer.roomEntity.rNum}</td>
                    <td>${customer.roomEntity.typeEntity.tName}</td>
                    <td>
                        <button type="button" class="btn btn-primary" onclick="update(${customer.cId})" data-toggle="modal" data-target="#updataModal">修改</button>
                        <button type="button" class="btn btn-danger" onclick="del(${customer.cId})">退房</button>
                    </td>
                </tr>`
                    $("tbody").append(rowItem);

                    i++;
                }
            })
        }
        function loadRooms(){
            let id = $("#type").val();
            $.getJSON("/room/selectByType",{"id":id},function (rooms){
                $("#rNum").empty();
                let option = `<option value="0" readonly="readonly">请选择房间</option>`
                for (let room of rooms) {
                    option += `<option value="${room.rId}">${room.rNum}</option>`
                }
                $("#rNum").append(option);
            })
        }
        function update(id){
            loadTypes();
            $.getJSON("/customer/selectOne",{"id":id},function (customer){
                $("#id").val(customer.cId);
                $("#cName").val(customer.cName);
                $("#cNum").val(customer.cNum);
                $("#cPhone").val(customer.cPhone);
            });
        }
        function del(id){
            if (confirm("是否确定退房？")){
                $.post("/customer/delOne",{"id":id},function (data){
                    if (data){
                        bootoast({
                            message:"退房成功",
                            position:"top",
                            type:"success",
                            timeout:2
                        })
                    }else {
                        bootoast({
                            message:"退房失败",
                            position:"top",
                            type:"danger",
                            timeout:2
                        })
                    }
                })
            }
        }
    </script>
</head>

<body>
<div class="container-fluid my-container">
    <!-- 页头 -->
    <ol class="breadcrumb" style="margin-top:5px;">
        <li><a href="#">主页</a></li>
        <li><a href="#">顾客管理</a></li>
        <li class="active">顾客列表</li>
    </ol>
    <!-- 检索框 -->
    <form class="form-inline">
        <div class="form-group">
            <input type="text" class="form-control" id="searchValue" placeholder="请输入关键字">
        </div>
        <button type="button" class="btn btn-primary" id="searchBtn">搜索</button>
        <!--        <button type="button" class="btn btn-danger">批量删除</button>-->
    </form>
    <!-- 内容 -->
    <div class="panel panel-default" style="margin-top: 10px;">
        <div class="panel-heading">
            <h3 class="panel-title">操作面板</h3>
        </div>
        <div class="panel-body">
            <!-- 表格 -->
            <table class="table table-hover table-condensed table-bordered table-striped">
                <thead>
                <!-- 标题行 -->
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>身份证号</th>
                    <th>手机号</th>
                    <th>房间号</th>
                    <th>房间类型</th>
                    <th width="180">操作</th>
                </tr>
                </thead>
                <tbody>
                <!-- 内容行 -->

                </tbody>
            </table>
            <!-- 分页组件 -->
            <nav aria-label="Page navigation">
                <ul class="pagination" id="pagination">
                    <!--                    <li>-->
                    <!--                        <a href="#" aria-label="Previous">-->
                    <!--                            <span aria-hidden="true">&laquo;</span>-->
                    <!--                        </a>-->
                    <!--                    </li>-->
                    <!--                    <li><a href="#">1</a></li>-->
                    <!--                    <li><a href="#">2</a></li>-->
                    <!--                    <li><a href="#">3</a></li>-->
                    <!--                    <li><a href="#">4</a></li>-->
                    <!--                    <li><a href="#">5</a></li>-->
                    <!--                    <li>-->
                    <!--                        <a href="#" aria-label="Next">-->
                    <!--                            <span aria-hidden="true">&raquo;</span>-->
                    <!--                        </a>-->
                    <!--                    </li>-->
                </ul>
            </nav>
        </div>
    </div>


    <!-- 尾部 -->
    <div class="footer">技术支持:西安粤嵌信息科技有限公司</div>
</div>
<!-- 模态框 房间信息展示与修改-->
<div class="modal fade" id="updataModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel"
                    style="border-left: 5px solid dodgerblue;padding-left: 10px;">编辑房间信息</h4>
            </div>
            <div class="modal-body">
                <!-- 表单 -->
                <form>
                    <input type="text"  name="id" id="id" hidden>
                    <div class="form-group">
                        <label for="cName">姓<span
                                style="color:transparent;user-select: none;">隐藏</span>名：</label>
                        <input type="text" class="form-control" name="cName" id="cName" readonly>
                    </div>
                    <div class="form-group">
                        <label for="cNum">身份证号：</label>
                        <input type="text" class="form-control" name="cNum" id="cNum" readonly>
                    </div>

                    <div class="form-group">
                        <label for="cPhone">电<span style="color:transparent;user-select: none;">隐藏</span>话：</label>
                        <input type="text" class="form-control" name="cPhone" id="cPhone" readonly>
                    </div>
                    <div class="form-group">
                        <label for="type">房间类型：</label>
                        <select class="form-control" id="type" onblur="loadRooms()">

                        </select>
                    </div>
                    <div class="form-group">
                        <label for="rNum">房<span style="color:transparent;user-select: none;">隐藏</span>间：</label>
                        <select class="form-control" id="rNum">

                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="save-btn">保存</button>
            </div>
        </div>
    </div>
</div>
<!--删除元素模态框-->
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel2"
                    style="border-left: 5px solid dodgerblue;padding-left: 10px;">温馨提示</h4>
            </div>
            <div class="modal-body">
                确定删除当前学生？
                <input type="hidden" id="userId2">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="del-btn">确认</button>
            </div>
        </div>
    </div>
</div>
<script>
    /**
     * 分页按钮点击事件
     * @param keywords
     * @param flag
     * @param page
     */
    // function pageClick(flag,page){
    //     console.log("cese")
    //     // let keywords = $("#searchValue").val();
    //     // let adminHome = new AdminHome();
    //     // adminHome.queryAll(keywords,flag,page);
    // }
</script>
</body>

</html>